<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width="80%"
             @open="handleDialogOpen()" v-loading="loading">
    <!--    {{bodyModel}}-->
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-form :model="bodyModel" :rules="formRules"
             ref="bodyTypeForm" label-width="80px" label-position="right" size="small">
      <el-form-item v-show="dialogProps.isAdd" label="ID" prop="id">
        <el-col :span="16"><el-input ref="code" :maxlength="32" v-model="bodyModel.id" disabled ></el-input></el-col>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-col :span="16"><el-input :maxlength="32" v-model="bodyModel.name" disabled></el-input></el-col>
      </el-form-item>
      <el-tabs type="border-card">
        <el-tab-pane>
<!--          //强迫症化  焦虑症化  恐怖症化-->
          <span slot="label"><i class="el-icon-edit"></i> 强迫症化</span>
          <el-form>
            <div class="questionDiv" v-for="(item) in questions1" :key="item.id">
              <el-form-item :label="item.question" prop="selectOption" v-show="item.isRadio==0">
                <el-radio-group v-model="item.selectOption">
                  <el-radio border v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label="item.question" prop="checkOptions" v-show="item.isRadio==1">
                <el-checkbox-group v-model="item.checkOptions">
                  <el-checkbox border  v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>

            </div><!--{{questions}}-->

          </el-form>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-edit"></i> 焦虑症化</span>
          <el-form>
            <div class="questionDiv" v-for="(item) in questions2" :key="item.id">
              <!--<p>{{item.question}}</p>-->
              <!--<el-radio-group v-model="isStart" v-show="item.isRadio==0" prop="question">
                <el-radio border v-for="value in item.tAssessQuestionOptionList" :label="value.options" :key="value.id"></el-radio>
              </el-radio-group>-->
              <el-form-item :label="item.question" prop="selectOption" v-show="item.isRadio==0">
                <el-radio-group v-model="item.selectOption">
                  <el-radio border v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label="item.question" prop="checkOptions" v-show="item.isRadio==1">
                <el-checkbox-group v-model="item.checkOptions">
                  <el-checkbox border  v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>

            </div><!--{{questions}}-->

          </el-form>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-edit"></i> 恐怖症化</span>
          <el-form>
            <div class="questionDiv" v-for="(item) in questions3" :key="item.id">
              <el-form-item :label="item.question" prop="selectOption" v-show="item.isRadio==0">
                <el-radio-group v-model="item.selectOption">
                  <el-radio border v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label="item.question" prop="checkOptions" v-show="item.isRadio==1">
                <el-checkbox-group v-model="item.checkOptions">
                  <el-checkbox border  v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>

            </div><!--{{questions}}-->

          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('bodyTypeForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { updateResult,saveResult, queryQPZQuestion,  queryYuQuestion,   queryKBQuestion} from '@/api/xy/result'

  export default {
    name: 'body-edit',
    data() {
      return {
        loading: false,
        bodyModel: {},
        dialogProps: {
          visible:false,
          action: '',
          title: '',
          isAdd:null
        },
        formRules: {
        },
        questions1:[],
        questions2:[],
        questions3:[],
        questionTotal:[],
      }
    },
    methods: {
      initQuestion(){
        this.loading = true;
        queryQPZQuestion()
          .then(response => {
            this.questions1 = response.data;
            for(var i=0;i<this.questions1.length;i++){
              if(this.questions1[i].isRadio==1){
                this.$set(this.questions1[i],'checkOptions', []); //起作用
              }
            }
            this.questionTotal.push(this.questions1);
          })
          .catch(error => {
            console.log(error)
            this.loading = false;
          })

        queryYuQuestion()
        .then(response => {
          this.questions2 = response.data;
          for(var i=0;i<this.questions2.length;i++){
            if(this.questions2[i].isRadio==1){
              this.$set(this.questions2[i],'checkOptions', []); //起作用
            }
          }
          this.questionTotal.push(this.questions2);
        })
        .catch(error => {
          console.log(error);
          this.loading = false;
        })

        queryKBQuestion()
        .then(response => {
          this.questions3 = response.data;
          for(var i=0;i<this.questions3.length;i++){
            if(this.questions3[i].isRadio==1){
              this.$set(this.questions3[i],'checkOptions', []); //起作用
            }
          }
          this.questionTotal.push(this.questions3);
        })

      },
      submitForm() {
        axios.post("/Result/addResult",this.questionTotal).then(()=>{
          this.$message({
            message: '评估成功，请耐心等待结果',
            type: 'success'
          });
        })
      },
      doUpdateRole() {
        this.loading = true
        updateResult(this.bodyModel.id, this.bodyModel)
          .then(response => {
            this.loading = false
            this.dialogProps.visible = false
            this.$emit('save-finished')
          })
          .catch(error => {
            this.outputError(error)
          })
      },
      doSaveRole() {
        this.loading = true
        saveResult(this.bodyModel)
          .then(response => {
            this.loading = false
            this.dialogProps.visible = false
            //刷新
            this.$emit('save-finished')
          })
          .catch(error => {
            this.outputError(error)
          })
      },
      handleDialogClose() {
        this.dialogProps.visible = false;
      },
      handleDialogOpen() {
        this.$nextTick(() => {
          this.$refs['bodyTypeForm'].clearValidate()
          this.$refs['code'].focus()
        })
      },
      outputError(error) {
        console.log(error.response ? error.response : error.message)
        this.loading = false
        this.$message({
          showClose: true,
          message: '出错了，请按F12查看浏览器日志。',
          type: 'error'
        })
      }
    },
    mounted: function() {

      this.$nextTick(() => {
        this.$on('openEditResultDialog', function(body) {
          this.bodyModel = body
          this.dialogProps.action = 'edit'
          this.dialogProps.isAdd=true
          this.dialogProps.title = '修改体制测评结果'
          this.dialogProps.visible = true

        })
        this.$on('openAddResultDialog', function() {
          //Object.assign(this.$data)
          this.bodyModel={};
          this.dialogProps.action = 'add'
          this.dialogProps.isAdd=false
          this.dialogProps.title = '新增体制测评'
          this.dialogProps.visible = true
        })
        this.$on("openReadResultDialog",function (body) {
          this.bodyModel = body;
          this.dialogProps.action = 'edit'
          this.dialogProps.isAdd=true
          this.dialogProps.title = '查看详情'
          this.dialogProps.visible = true
        })
      })
    },
    created() {
      this.initQuestion();
    }
  }
</script>

